<template>

  <div v-if="tryStatus" class="teamBackView">
    <div class="topView">
      <van-button v-if="showInviteBtn" type="default" class="inviteBtn" @click="inviteClick">
        添加成员
      </van-button>
      <p class="countLabel">人数10/50人</p>
    </div>

    <div style="background-color: white;">
      <div style="background: #E4E8EC; height: 4px"></div>
      <p class="nameLabel">深圳市中训联合</p>
      <div v-for="(el, idx) in fixTeamList">
        <team-cell :data="el" @sendSettingClick="settingClick"></team-cell>
        <div style="height: 1px; background-color: #E4E8EC; margin-left: 72px"></div>
      </div>
    </div>

    <level-cover :show="tryStatus"></level-cover>

  </div>
  <div v-else>
    <div v-if="teamData" class="teamBackView">

      <div class="topView">

        <div v-if="showTeamInviteBtn" style="padding: 0 32px; display: flex; justify-content: center">
          <van-button v-if="showInviteBtn" type="default" class="halfBtn" @click="inviteClick">
            成员管理
          </van-button>
          <!--          <div style="width: 42px"></div>-->
          <!--          <van-button v-if="showTeamInviteBtn" type="default" class="halfBtn halfBtnBlue" @click="teamInviteClick">-->
          <!--            添加门店-->
          <!--          </van-button>-->
        </div>

        <div v-else>
          <van-button v-if="showInviteBtn" type="default" class="inviteBtn" @click="inviteClick">
            成员管理
          </van-button>
        </div>
        <p class="countLabel">人数{{ teamData.userCn }}/{{ teamData.limitCn }}人</p>
      </div>

      <div v-if="fixTeamList" style="background-color: white;">
        <div style="background: #E4E8EC; height: 4px"></div>
        <p class="nameLabel">{{ teamData.enterpriseName }}</p>
        <div v-for="(el, idx) in fixTeamList">
          <team-cell :data="el" @sendSettingClick="settingClick(el)"></team-cell>
          <div style="height: 1px; background-color: #E4E8EC; margin-left: 72px"></div>
        </div>
      </div>

      <van-action-sheet
        v-model="showSetting"
        :actions="actions"
        :z-index="2000"
        cancel-text="取消"
        close-on-click-action
        @select="onSelect"
      />

      <move-member-cover v-if="roleType === 2 && settingUser" v-model="showMove" :user="settingUser"
                         :enterprise-name="teamData.enterpriseName" @sendMoveSuccess="moveSuccess"></move-member-cover>

    </div>
  </div>

</template>

<script>
import UniversityTool from '@/pages/university/UniversityTool'
import TeamCell from './components/TeamCell'
import LevelCover from '../components/LevelCover'
import MoveMemberCover from './components/MoveMemberCover'
import TeamAPI from '@/repo/api/TeamAPI'
import Vue from 'vue'
import {ActionSheet, Button, Toast} from 'vant'
import UserAPI from '../../../repo/api/UserAPI'

Vue.use(Button)
Vue.use(ActionSheet)

export default {
  name: 'team',
  props: {
    teamId: {
      type: Number,
      default: null,
    },
    tryStatus: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    teamId: function (val) {
      Toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      })
      this.getTeamData()
    }
  },
  components: {
    TeamCell,
    LevelCover,
    MoveMemberCover,
  },
  data() {
    return {
      teamData: null,
      teamList: null,
      showSetting: false,
      showMove: false,
      settingUser: null,
      actions: [],
    }
  },
  computed: {
    //是否是管理员 0为成员 1为普通管理员 2为超级管理员
    roleType() {
      return this.$store.getters.enterpriseRoleInfo.roleType
    },
    //是否可以邀请成员
    showInviteBtn() {
      if (this.roleType === 2) {
        return true
      } else if (this.roleType === 1) {
        let permission = this.$store.getters.enterpriseRoleInfo.permission || '[1, 2]'
        permission = JSON.parse(permission)
        return permission.length > 0
      } else {
        return false
      }
    },
    //是否可以企业邀请
    showTeamInviteBtn() {
      let enterpriseId = this.$store.getters.enterpriseInfo.enterprise.id
      return this.roleType === 2 && this.teamId == enterpriseId

    },
    //组装成员列表数据
    fixTeamList() {
      let list = []
      if (this.tryStatus) {
        list = [
          {'nickname': '张三', 'pic': '/web-hft-ee/static/img/university/demo_0.jpg', 'learnValue': 1220, 'roleType': 2},
          {'nickname': '李四', 'pic': '/web-hft-ee/static/img/university/demo_1.jpg', 'learnValue': 1092, 'roleType': 0},
          {'nickname': '王五', 'pic': '/web-hft-ee/static/img/university/demo_2.jpg', 'learnValue': 908, 'roleType': 0},
          {'nickname': '赵六', 'pic': '/web-hft-ee/static/img/university/demo_3.jpg', 'learnValue': 899, 'roleType': 0},
          {'nickname': '孙七', 'pic': '/web-hft-ee/static/img/university/demo_4.jpg', 'learnValue': 777, 'roleType': 0},
          {'nickname': '周八', 'pic': '/web-hft-ee/static/img/university/demo_5.jpg', 'learnValue': 620, 'roleType': 0},
          {'nickname': '吴九', 'pic': '/web-hft-ee/static/img/university/demo_6.jpg', 'learnValue': 500, 'roleType': 0},
          {'nickname': '赵十', 'pic': '/web-hft-ee/static/img/university/demo_7.jpg', 'learnValue': 469, 'roleType': 0},
          {'nickname': '刘一', 'pic': '/web-hft-ee/static/img/university/demo_8.jpg', 'learnValue': 320, 'roleType': 0},
          {'nickname': '陈二', 'pic': '/web-hft-ee/static/img/university/demo_9.jpg', 'learnValue': 9, 'roleType': 0},
        ]
      } else {
        list = this.teamList
      }
      return list
    }

  },
  mounted() {
    window['onJsChooseEditStudent'] = (jsonStr) => {
      this.onJsChooseEditStudent(jsonStr)
    }
    //onJsChooseEditStudent(String json)
    //JS企业大学选择编辑学员：json请包含如下字段：max标识人数上限，id标识订单id，choiceStudents表示已选择学员、
    // 然后需要你们确定一个我们选择学员完成回调你们的方法就可以了

    if (this.teamId) {
      this.getTeamData()
    }

  },
  methods: {
    onJsChooseEditStudent(data) {
      console.log('回调成功--------', data)
      data = typeof data === 'string' ? JSON.parse(data) : data
      console.log('回调成功end--------', data)
      // let userList = data.choiceStudents
      if (data === '' && data === null) {
        Toast('数据不能为空')
        // for (let i = 0; i < data.choiceStudents.length; i++) {
        //     if(data.choiceStudents[i].userName === ''){
        //       break;
        //     }
        // }
        return
      }


      // let companyId = data.companyId
      // let sendData = []
      // for (let i = 0; i < userList.length; i++) {
      //   let temp = {
      //     organizatioName: userList[i].compName,
      //     companyId: companyId,
      //     isManager: userList[i].isManager,
      //     cityId: userList[i].cityId,
      //     userName: userList[i].userName,
      //     archiveId: userList[i].archiveId,
      //   }
      //   sendData.push(temp)
      // }
      //console.log('-------', sendData)

      UserAPI.editUserList(data).then((res) => {
        console.log('edit User List', res)
        let data = res.responseData;
        if (data.list.length >= 1) {
          this.getTeamData()
        }
      })

    },
    //邀请点击
    inviteClick() {
      UserAPI.hftList().then((res) => {
        let data = res.responseData
        if (data) {
          if (window.hasOwnProperty('zshft')) {
            window.zshft.onJsChooseEditStudent(JSON.stringify(data))
          }
        }
      })

      // if (this.teamData.userCn >= this.teamData.limitCn) {
      //   Toast('成员已达上限')
      //   return
      // }
      //  let hsId = this.$store.getters.hsId
      // let loginType = this.$store.getters.loginType
      //  window.location.href = window.location.origin + `/web-hft-ee/university/team/invite/${this.teamData.id}/${loginType}/${hsId}`
    },
    //企业邀请按钮
    teamInviteClick() {
      let hsId = this.$store.getters.hsId
      let loginType = this.$store.getters.loginType
      window.location.href = window.location.origin + `/web-hft-ee/university/team/invite-enterprise/${this.teamId}/${loginType}/${hsId}`
    },
    //人员设置点击
    settingClick(data) {
      // this.actions = UniversityTool.getEditUserItems(data)
      // this.settingUser = data
      // this.showSetting = true
    },
    //sheet点击
    onSelect(item) {
      if (item.index === 0) {
        //打开或关闭管理员权限
        UniversityTool.modifyManagerPermission(this.settingUser).then(() => {
          this.getTeamData()
        })
      } else if (item.index === 1) {
        //任命管理员
        UniversityTool.setManager(this.settingUser).then(() => {
          this.getTeamData()
        })
      } else if (item.index === 2) {
        //更换企业
        this.showMove = true
      } else if (item.index === 3) {
        //移除员工
        UniversityTool.kickMember(this.settingUser).then(() => {
          this.getTeamData()
        })
      }
    },
    //移动成员成功
    moveSuccess() {
      this.getTeamData()
    },
    getTeamData() {
      Promise.all([TeamAPI.getTeamInfo(this.teamId), UniversityTool.getTeamMemberList(this.teamId)]).then((res) => {
        this.teamData = res[0].responseData.enterprise
        this.teamList = res[1]
      }).finally(() => {
        Toast.clear()
      })

    }
  }
}
</script>

<style scoped>
.teamBackView {
  min-height: 100vh;
  background-color: white;
}

.topView {
  background-color: white;
  text-align: center;
}

.inviteBtn {
  width: 220px;
  height: 48px;
  background-color: white;
  color: #1DA1F2;
  font-size: 14px;
  font-weight: 500;
  border-radius: 24px;
  margin-top: 24px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);
}

.halfBtn {
  width: 120px;
  height: 40px;
  background-color: white;
  color: #1DA1F2;
  font-size: 14px;
  font-weight: 500;
  border-radius: 24px;
  margin-top: 20px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);

}

.halfBtnBlue {
  background-color: #1DA1F2;
  color: white;
}

.countLabel {
  font-size: 12px;
  color: #98999E;
  padding: 12px 0;
}

.nameLabel {
  font-weight: bold;
  font-size: 16px;
  color: #323334;
  padding: 16px 16px 8px 16px;
}
</style>
7
